<template>
    <div class="noteContent">
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" v-if="isAsideActive==='true'">
                <el-menu default-active="1">
                    <el-menu-item @click="findTitle(title.href)" v-for="(title, index) in titles" :index="(index+1)">
                        <a v-html="title.text"></a>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: center; font-size: 18px">
                    <el-button @click="$router.push('/note/noteshelf')" type="text" icon="el-icon-arrow-left"
                               style="color: black">返回
                    </el-button>
                    <h2>{{note.nname}}</h2>
                    <el-tooltip content="显示目录结构" placement="top">
                        <el-switch
                                v-model="isAsideActive"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="true"
                                inactive-value="false">
                        </el-switch>
                    </el-tooltip>
                </el-header>

                <el-main>
                    <el-button @click="$router.push('/note/noteDetail/'+note.nid)" type="primary" circle
                               icon="el-icon-edit">
                    </el-button>
                    <div v-html="note.ncontentHtml"></div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "NoteContent",
        data() {
            return {
                tabPosition: 'left',
                isAsideActive: 'false',
                note: {},
                titles: []
            }
        },
        methods: {
            getTitls(contentHtml) {
                let divDom = document.createElement('div')
                divDom.innerHTML = contentHtml
                let childNode = divDom.children
                for (let i = 0; i < childNode.length; i++) {
                    if (childNode[i].nodeName.indexOf('H') !== -1) {
                        const initTab = '&nbsp;&nbsp;&nbsp;&nbsp;'
                        let tab = ''
                        for (let j = 1; j < childNode[i].nodeName[1]; j++) {
                            tab += initTab
                        }
                        this.titles.push({
                            href: '#' + childNode[i].children[0].getAttribute('id'),
                            text: tab + childNode[i].innerText
                        })
                    }
                }

            },
            prefixId(contentHtml) {
                let divDom = document.createElement('div')
                divDom.innerHTML = contentHtml
                let childNode = divDom.children
                for (let i = 0; i < childNode.length; i++) {
                    if (childNode[i].nodeName.indexOf('H') !== -1) {
                        let id = childNode[i].children[0].getAttribute('id')
                        childNode[i].children[0].setAttribute('id', 'title_' + id)
                    }
                }
                return divDom.innerHTML
            },
            findTitle(href) {
                document.querySelector(href).scrollIntoView(true)
            }
        },
        mounted() {
            if (this.$route.params.noteId) {
                const _this = this
                axios.get('http://localhost:2020/note/noteDetail/' + this.$route.params.noteId).then(function (res) {
                    if (res.data.status === 200) {
                        _this.note = res.data.object
                        _this.note.ncontentHtml = _this.prefixId(_this.note.ncontentHtml)
                        _this.getTitls(_this.note.ncontentHtml)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .el-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
        background-color: rgb(238, 241, 246);
        text-align: left;
    }

    .el-main {
        position: relative;
        display: flex;
        justify-content: center;
        text-align: left;
    }

    .el-main > .el-button {
        position: absolute;
        right: 30px;
        top: 30px;
    }

    a {
        text-decoration: none;
    }
</style>